<template>
	<view class="content">
		<view class="block article-block">
			<view class="menu-block">
				<view class="label-item">
					<picker class="form-ctrl" :range="experience" range-key="data" :value="form.scaleId" @change="bindType">
						{{form.scaleId==0? "规模" :experience[form.scaleId]['data']}}
					</picker>
					<view class="iconfont icon-icon_xialaxuanze" style="font-size: 12px;"></view>
				</view>
				<view class="label-item">
					<MultipleCol class="form-ctrl" :range="industry" :value="form.industryId" @selected="bindTownship">
					</MultipleCol>
					<view class="iconfont icon-icon_xialaxuanze" style="font-size: 12px;"></view>
				</view>
				<!-- <view class="label-item">
					<picker class="form-ctrl" :range="distance" range-key="distanceText" :value="distanceId" @change="bindDistance">
						{{distanceId==-1? "性质" :distance[distanceId]['distanceText']}}
					</picker>
					<view class="iconfont icon-icon_xialaxuanze" style="font-size: 12px;"></view>
				</view> -->
			</view>
			<view class="article-list">
				<template v-if="hotEnterprise.length>0">
					<view @click="navigate('/page_other/company/company?id='+item.id)" class="enterprise-item"
						v-for="(item,index) in hotEnterprise" :key="item.id">
						<image :src="item.logoUrl ? item.logoUrl : imageUrl+'/job_hunting/job_detail/enterprise.jpg'"
							@error="onErrorImg(item)" class="cover-photo"></image>
						<view class="list-info">
							<view class="title">{{item.brandName}}</view>
							<view class="address">
								<view class="add" v-if="item.enterpriseName">{{item.enterpriseName}}</view>
								<view class="add" v-else style="margin-left: 0px;">暂无企业类型</view>
								<view class="add">/ {{item.scaleName}}</view>
							</view>
							<view class="positionCount"><text style="color: #fe7526;">{{item.fairCount}}</text>个热招职位
							</view>
						</view>
					</view>
				</template>
				<view v-if="list.hotEnterprise==total&&!more" style="text-align: center;">没有更多了哦</view>
				<view v-else style="text-align: center;">暂无数据</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getHotEnterprise
	} from '@/api/job_hunting.js'
	import {
		mapGetters
	} from 'vuex';
	import {
		isMore
	} from '@/util/util.js';
	import {
		getUser
	} from '@/api/user.js'
	import {
		getScale,
		getIndustryAll
	} from '@/api/company.js'
	import MultipleCol from '@/page_other/components/Picker/MultipleCol'
	export default {
		components: {
			MultipleCol
		},
		data() {
			return {
				form:{
					industryId: 0,
					scaleId: 0,
				},
				hotEnterprise: [],
				page: 1,
				limit: 10,
				more: true,
				total: 0,
				latitude: 0,
				longitude: 0,
				imageUrl: '',
				expType: -1,
				experience: [{
					id: -1,
					data: "全部"
				}],
				industry: [],
				distance: [{
					id: -1,
					distanceText: '全部'
				}],
				distanceId: -1,
			}
		},
		methods: {
			bindPicker(e,key,rangeKey=''){
				const index=e.detail.value;
				this.$set(this,key+'Index',index);
				this.$set(this.form,key,this[rangeKey||key][index].id)
			},
			bindTownship(e){
				this.form.industryId=e
				this.getHotList(true);
			},
			bindDistance(e) {
				this.more = true
				this.distanceId = e.detail.value
			},
			bindType(e) {
				this.more = true
				this.form.scaleId = e.detail.value
				this.getHotList(true);
			},
			bindIndustry(industry) {
				this.industryId = industry
			},
			refresh() {
				this.page = 1
				this.more = true
				this.getHotList(true);
			},
			navigate(url) {
				uni.navigateTo({
					url
				})
			},
			getScaleList() {
				getScale().then((res) => {
					for (let i = 0; i < res.length; i++) {
						const current = res[i];
						this.experience.push({
							id: current.id,
							data: current.data
						})
					}
				})
			},
			getIndustryList() {
				
				getIndustryAll({
					
				}).then((res) => {
					this.industry = res
				})
			},
			getHotList(refresh = false) {
				let industryId = ''
				if(this.form.industryId)
				{
					industryId = this.form.industryId[3]
				}
				let scaleId =''
				if(this.form.scaleId)
				{
					scaleId = this.form.scaleId
					console.log(111)
					console.log(this.form.scaleId)
				}
				getHotEnterprise({
					page: this.page,
					limit: this.limit,
					industryId: industryId,
					scaleId: scaleId,
					latitude: this.latitude,
					longitude: this.longitude,
				}).then((res) => {
					let hotEnterprise = res.list ?? [];
					this.hotEnterprise = refresh ? hotEnterprise : [...this.hotEnterprise, ...hotEnterprise]
					this.total = res.count
					this.more = isMore(this.page, this.limit, this.total)
				})
			},
			onReachBottom() {
				if (this.more) {
					this.page++;
					this.getHotList()
				}
			},
		},
		computed: {
			...mapGetters(['identity', 'user'])
		},
		onLoad(e) {
			var latitude = wx.getStorageSync('latitude');
			var longitude = wx.getStorageSync('longitude');
			this.setData({latitude:latitude})
			this.setData({longitude:longitude})
			this.imageUrl = this.globalConfig.imageUrl
			this.getHotList()
			this.getScaleList()
			this.getIndustryList()
		}
	}
</script>

<style lang="scss">
	.content {
		width: 100%;
		padding-bottom: 30rpx;
		padding: 30rpx;

		.menu-block {
			display: flex;

			.label-item {
				display: flex;
				flex-direction: row;
				align-items: center;
				padding: 10rpx 10rpx;
				font-size: 28rpx;
				color: #FE7526;
				background: #FDECE5;
				margin-right: 20rpx;
				text-align: center;

				.form-ctrl {
					width: 160rpx;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
					text-align: center;
				}

			}
		}

		.block.article-block {
			width: 100%;
			margin: 0 auto;
			border-radius: 10rpx;
			padding-bottom: 0;

			.article-tab {
				width: 100%;
				height: 70rpx;
				display: flex;
				flex-direction: row;
				align-items: center;
				font-weight: bold;
				font-size: 34rpx;
				color: #313131;

				.tab-item {
					margin-right: 30rpx;
					display: flex;
					align-items: center;
					justify-content: center;
				}

				.tab-item.active {
					color: #E06F59;
					border-bottom: 2px solid #DE6349;
					height: 100%;
				}

				.tab-item:last-child {
					margin: 0;
				}
			}

			.article-list {
				width: 100%;
				display: flex;
				flex-direction: column;

				.enterprise-item {
					width: 100%;
					background: #fff;
					border-radius: 10rpx;
					box-shadow: 0 0 10px 0 #efefef;
					padding: 20rpx;
					display: flex;
					flex-direction: row;
					justify-content: center;
					margin: 20rpx auto;

					.cover-photo {
						width: 150rpx;
						height: 150rpx;
						background: #efefef;
						margin-right: 20rpx;
						border-radius: 20rpx;

					}

					.list-info {
						width: 70%;
						display: flex;
						flex-direction: column;

						view {
							overflow: hidden;
							text-overflow: ellipsis;
							white-space: nowrap;
						}

						.title {
							color: #000;
							font-weight: bold;
							font-size: 34rpx;
						}

						.address {
							display: flex;
							flex-direction: row;

							.add {
								color: #999;
								font-size: 26rpx;
								margin-top: 20rpx;
							}
						}

						.city {
							color: #999;
							font-size: 26rpx;
							margin-left: 4rpx;
						}

						.imgs2 {
							width: 17px;
							height: 17px;
							margin-left: 70rpx;
							vertical-align: bottom;
						}

						.positionCount {
							font-size: 28rpx;
							margin-top: 20rpx;
						}

						.label-block {
							font-size: 24rpx;
							display: flex;
							flex-direction: row;
							flex-wrap: wrap;
							justify-content: left;
							margin-top: 20rpx;

							.label-item {
								padding: 8rpx 20rpx;
								background: #F5F6F8;
								color: #999;
								margin: 0 10rpx 20rpx 0;
							}
						}

						.wage {
							color: #FE7526;
							font-size: 36rpx;
							font-weight: bold;

							.unit {
								font-size: 28rpx;
								font-weight: normal;
							}
						}
					}
				}

				.list-item {
					width: 100%;
					background: #fff;
					border-radius: 10rpx;
					box-shadow: 0 0 10px 0 #efefef;
					padding: 20rpx;
					display: flex;
					flex-direction: row;
					justify-content: center;
					margin-bottom: 20rpx;

					.detail-info {
						width: 260rpx;
						//height: 200rpx;
						display: flex;
						flex-direction: row;
						flex-wrap: wrap;
						justify-content: center;
						align-items: center;

						.name {
							width: 110rpx;
							font-size: 24rpx;
							color: #999;
							overflow: hidden;
							text-overflow: ellipsis;
							white-space: nowrap;
							text-align: center;
							text-indent: 15rpx;
						}

						.photo {
							width: 70rpx;
							height: 70rpx;
							border-radius: 100%;
							background: #efefef;
						}

						.apply-btn {
							border: 1px solid #FE7526;
							border-radius: 8rpx;
							color: #FE7526;
							font-size: 24rpx;
							padding: 8rpx 28rpx;
							position: relative;
							left: 30rpx;
						}
					}

					.list-info {
						// width: calc(100% - 180rpx);
						width: 100%;
						display: flex;
						flex-direction: column;

						>view {
							width: 100%;
							overflow: hidden;
							text-overflow: ellipsis;
							white-space: nowrap;
						}

						.title-info {
							display: flex;
							flex-direction: row;
							align-items: center;

							.title {
								color: #000;
								font-weight: bold;
								font-size: 34rpx;
							}

							.fast-job {
								width: 60rpx;
								height: 38rpx;
								border: 1rpx solid #FE7526;
								font-size: 24rpx;
								text-align: center;
								color: #FE7526;
								margin-left: 20rpx;
								border-radius: 6rpx;
							}
						}

						.detail-item {
							display: flex;
							justify-content: space-between;
							align-items: center;

							.money-item {
								margin-top: 20rpx;

								.wage {
									color: #FE7526;
									font-size: 36rpx;
									font-weight: bold;

									.unit {
										font-size: 28rpx;
										font-weight: normal;
									}
								}
							}

							.detail-info {
								width: 180rpx;
								// height: 200rpx;
								display: flex;
								flex-direction: row;
								flex-wrap: wrap;
								justify-content: center;
								align-items: center;

								.name {
									width: 110rpx;
									font-size: 24rpx;
									color: #999;
									overflow: hidden;
									text-overflow: ellipsis;
									white-space: nowrap;
									text-align: center;
									text-indent: 15rpx;
								}

								.photo {
									width: 70rpx;
									height: 70rpx;
									border-radius: 100%;
									background: #efefef;
								}

								.apply-btn {
									border: 1px solid #FE7526;
									border-radius: 8rpx;
									color: #FE7526;
									font-size: 24rpx;
									padding: 8rpx 28rpx;
									position: relative;
									left: 30rpx;
								}
							}
						}

						.address-item {
							display: flex;
							justify-content: space-between;

							.address {
								width: 440rpx;
								color: #999;
								font-size: 26rpx;
								margin-top: 20rpx;
								overflow: hidden;
								text-overflow: ellipsis;
								white-space: nowrap;
							}

							.distance {
								color: #999;
								font-size: 26rpx;
								margin-top: 20rpx;
							}
						}

						.label-block {
							font-size: 24rpx;
							display: flex;
							flex-direction: row;
							flex-wrap: wrap;
							justify-content: left;
							margin-top: 20rpx;

							.label-item {
								padding: 8rpx 20rpx;
								background: #F5F6F8;
								color: #999;
								margin: 0 10rpx 20rpx 0;
							}
						}

						.wage {
							color: #FE7526;
							font-size: 36rpx;
							font-weight: bold;

							.unit {
								font-size: 28rpx;
								font-weight: normal;
							}
						}
					}
				}

				.article-item {
					height: 220rpx;
					width: 100%;
					padding: 30rpx 0;
					border-bottom: 1px solid #efefef;
					display: flex;
					flex-direction: row;

					.cover-photo {
						width: 160rpx;
						height: 160rpx;
						border-radius: 10rpx;
						margin-right: 20rpx;
						background: #efefef;
					}

					.info {
						width: calc(100% - 180rpx);
						height: 100%;

						.title {
							font-weight: bold;
						}

						.abstract {
							font-size: 24rpx;
							color: #999;
							display: -webkit-box;
							-webkit-box-orient: vertical;
							-webkit-line-clamp: 2;
							overflow: hidden;
							margin-top: 6rpx;
							line-height: 1.5;
						}

						.time {
							font-size: 28rpx;
							color: #999;
						}
					}
				}

				.article-item:last-child {
					border: none;
				}
			}
		}
	}
</style>